<template>
  <!-- loading -->
  <van-loading type="spinner" v-if="!isShow" vertical size="30px" color="#969799" style="margin-top: 10vh;">加载中...
  </van-loading>

  <div class="game-rec-container" v-else>
    <van-pull-refresh v-model="pullLoading" @refresh="onRefresh">
      <van-list v-model:loading="loading" :finished="finished" finished-text="——没有更多了——" @load="onLoad">
        <!-- 搜索栏 -->
        <van-search v-model="serachValue" disabled />
        <!-- 轮播图 -->
        <div style="padding: 0px 10px; background-color: #fff;">
          <Swiper :banner="bannerList"></Swiper>
        </div>
        <!-- 宫格 -->
        <horizontal-grid></horizontal-grid>

        <van-tabs v-model:active="active" sticky offset-top="46px" animated>
          <van-tab title="正在热卖">
            <game-goods-item :GoodsInfo="GameSale"></game-goods-item>
          </van-tab>
          <van-tab title="最高折扣">
            <game-goods-item :GoodsInfo="GameDiscount"></game-goods-item>
          </van-tab>
          <van-tab title="价格升序">
            <game-goods-item :GoodsInfo="GameAscending"></game-goods-item>
          </van-tab>
          <van-tab title="价格降序">
            <game-goods-item :GoodsInfo="GameDescending"></game-goods-item>
          </van-tab>
          <van-tab title="最新上架">
            <game-goods-item :GoodsInfo="GameSale"></game-goods-item>
          </van-tab>
        </van-tabs>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script setup>
import Swiper from '../../../components/swipe/Swiper.vue';
import HorizontalGrid from '../../../components/horizontalGrid/horizontalGrid.vue';
import GameGoodsItem from '../../../components/gameGoodsItem/gameGoodsItem.vue';

import { getGameStoreRecSwiper, getGameStoreGameSale, getGameStoreGameDiscount, getGameStoreGameDescending } from '../../../network/gamestore'

import { onMounted, reactive, ref, computed } from 'vue';

// 搜索栏
const serachValue = ref('CS:GO')

// 获取轮播图数据
const bannerList = reactive([])
// 获取游戏销量数据
const GameSale = reactive([])
// 获取游戏折扣排行数据
const GameDiscount = reactive([])
// 获取游戏价格升序排行数据
const GameAscending = computed(() => {
  return [...GameDescending].reverse()
})
// 获取游戏价格降序排行数据
const GameDescending = reactive([])
onMounted(() => {
  getGameStoreRecSwiper().then(res => {
    bannerList.push(...res.data)
  })
  getGameStoreGameSale().then(res => {
    GameSale.push(...res.data)
    setTimeout(() => {
      isShow.value = true
    }, 500)
  })
  getGameStoreGameDiscount().then(res => {
    GameDiscount.push(...res.data)
  })
  // 价格降序
  getGameStoreGameDescending().then(res => {
    GameDescending.push(...res.data)
  })
})

const isShow = ref(false)

const active = ref(0);

// 上拉加载更多
const loading = ref(false);
const finished = ref(false);
const onLoad = () => {
  // 异步更新数据
  setTimeout(() => {
    getGameStoreGameSale().then(res => {
      GameSale.push(...res.data)
      loading.value = false;
      if (GameSale.length >= 30) {
        finished.value = true;
      }
    })
  }, 1000);
};

// 下拉刷新
const pullLoading = ref(false);
const onRefresh = () => {
  setTimeout(() => {
    pullLoading.value = false;
  }, 1000);
};
</script>

<style scoped>
.game-rec-container {
  padding-top: 46px;
  padding-bottom: 50px;
}
</style>
